<template>
    <div class="connnn">
        <div>
            <div class="im_head">
                <div>全部牛人</div>
                <div>新招呼</div>
                <div>沟通中</div>
            </div>
            <div class="im_con">
                <div class="im_list">
                    <div class="im_list_head">
                        <div>
                            <i class="el-icon-search"></i>
                        </div>
                        <div>
                            <el-select v-model="value"
                                placeholder="">
                                <el-option v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div>批量</div>
                    </div>
                    <ul>

                        <li v-for="(item,n) in userList"
                            :key="n"
                            class="list"
                            :class="{list_actives:n==sessionIndex}"
                            @click="select(item)">
                            <div class="acter_user">
                                <img :src="$fnc.getImgUrl(item.img)"
                                    class="im_avatar"
                                    alt="">
                                <span>2</span>
                            </div>
                            <div class="acter_text">
                                <div>
                                    <div class="user_im">{{item.name}}</div>
                                    <div class="user_time">15:15</div>
                                </div>
                                <p class="hid_text liuyan">{{item.msg}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="im_msg">
                    <div v-if="sessionIndex===''"
                        class="none_user">
                        <img src="../../assets/img/edit_im.png"
                            alt="">
                        <div>
                            <span>Tips:和你聊过的会员，将会自动归档在「<span>沟通中</span>」方便您继续沟通</span>
                        </div>
                    </div>
                    <div v-else>
                        <div class="msg_tabs">
                            <div :class="{im_active:index==0}"
                                @click="index=0">聊天</div>
                            <div :class="{im_active:index==1}"
                                @click="index=1">会员资料</div>
                            <div :class="{im_active:index==2}"
                                @click="index=2">会员流水</div>
                        </div>
                        <div class="user_ziliao">
                            <div class="user_ziliao_1">
                                <div>昵称：god</div>
                                <div>用户id：1</div>
                                <div>会员等级：黄金会员</div>
                                <div>推荐人：小花</div>
                            </div>
                        </div>
                        <div v-show="index==0">
                            <div class="msg_con">
                                <div class="liaotian_msg"
                                    v-scroll-bottom="sessionList">
                                    <div id="ell"
                                        class="m-message">
                                        <ul>
                                            <li v-for="(item,i) in sessionList"
                                                :key='i'>
                                                <p class="time"><span>{{item.date }}</span></p>
                                                <div class="main"
                                                    :class="[item.classname? 'self':'']">
                                                    <img class="avatar"
                                                        width="30"
                                                        height="30"
                                                        :src="item.avter" />

                                                    <div class="text"
                                                        v-if="item.text.types==0"
                                                        :class="[item.classname? '':'f_l']">
                                                        {{item.text.html}}</div>
                                                    <img :src="item.text.html"
                                                        class="text_img"
                                                        v-if="item.text.types==1"
                                                        :class="[item.classname? '':'f_l']">
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="msg_shuru">
                                <div class="msg_shuru_head">
                                    <div class="prover"
                                        v-if="isopenemoji">
                                        <span v-for="(item,index) in emoji"
                                            :key="index"
                                            @click="pointemoji(item)">
                                            <img :src="item.img">
                                        </span>
                                    </div>
                                    <div class="msg_shuru_gn">

                                        <div>
                                            <img class="emojie_con"
                                                @click="showEmoji"
                                                src="../../assets/img/im/bq.png">
                                        </div>
                                        <div>
                                            <i class="el-icon-picture"></i>
                                        </div>
                                    </div>
                                    <div class="msg_clos">
                                        <div>
                                            <i class="el-icon-circle-close-outline">沟通完成</i>
                                        </div>
                                        <div>
                                            <i class="el-icon-tickets">置为沟通中</i>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-text">
                                    <textarea placeholder=""
                                        v-model="text"
                                        class="textarea"
                                        @keyup="inputing"></textarea>
                                    <div class="bot">
                                        <span v-if="text==''">按Enter发送，按Ctrl+Enter换行发送</span>
                                        <el-button :loading='$store.state.isLoading'
                                            round
                                            size="small"
                                            class="bot_btn"
                                            @click="inputing">发送</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-show="index==1">
                            <div class="info">
                                <ul>
                                    <li>
                                        <span>用户ID：</span> god
                                    </li>
                                    <li>
                                        <span>用户姓名：</span> 星白最帅
                                    </li>
                                    <li>
                                        <span>会员昵称：</span> 星白最帅
                                    </li>

                                    <li>
                                        <span>注册时间：</span> 2018-11-12 12:00:00
                                    </li>
                                    <li>
                                        <span>会员等级：</span>至尊会员
                                    </li>
                                    <li>
                                        <span>所在区域：</span> 福建省福州市晋安区
                                    </li>
                                    <li>
                                        <span>登录时间：</span> 2019-04-13 17:10:00
                                    </li>
                                    <li>
                                        <span>推荐人：</span> 小明
                                    </li>
                                    <li>
                                        <span>手机号码：</span>18500202200
                                    </li>
                                    <li>
                                        <span>来源：</span>2018-12-12 12:00:00
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div v-show="index==2">
                            会员流水
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>





<style lang="less" scoped>
.text_img {
    width: 180px;
    height: 180px;
}
.emojie_con {
    padding: 7px;
}
.connnn {
    background: #eef0f5;
    padding-left: 30px;
}
.im_head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    > div {
        padding: 14px 16px;
        color: #9fa3b0;
        background: #ffffff;
        text-align: center;
        border-radius: 5px;
        margin-right: 4px;
    }
    :first-child {
        margin-right: 20px;
    }
}
.im_con {
    display: flex;
    justify-content: flex-start;

    > .im_list {
        width: 368px;
        height: 760px;
        margin-right: 4px;
        background: #f9fafb;
        overflow: hidden;
        > .im_list_head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #c5c8d0;
            padding: 10px 20px;
        }
        ul {
            height: 700px;
            overflow: auto;
            width: 394px;
            padding-right: 26px;
        }
        ul > li {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
            background: #ffffff;
            .acter_user {
                position: relative;
                width: 70px;
                text-align: center;
                > span {
                    position: absolute;
                    top: 0;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #fa6a43;
                    right: 0px;
                    color: #fff;
                }
            }
            .acter_text {
                width: 230px;
                margin-left: 15px;
                :first-child {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: nowrap;
                    align-items: flex-start;
                    > div.user_im {
                        text-align: left;
                        font-size: 20px;
                        color: #333;
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
    > .im_msg {
        flex: 3;
        background: #fff;
        .msg_tabs {
            height: 60px;
            background: #f9fafb;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: flex-end;
            padding-left: 15px;

            > div {
                height: 50px;
                width: 120px;
                position: relative;
                z-index: 13;
                position: relative;
                display: inline-block;
                // padding: .3em 1em 0;
                padding-top: 20px;
                cursor: pointer;
                margin: 0 -4px;
            }
            > div::before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: -1;
                background: #f9fafb;
                border: 1px solid #eef0f5;
                border-bottom: none;
                border-radius: 0.5em 0.5em 0 0;
                transform: perspective(1.5em) rotateX(5deg);
                transform-origin: bottom;
            }
            .im_active::before {
                background: #fff;
            }
        }
    }
}
div.user_time {
    font-size: 13px;
    color: #9fa3bc;
    text-align: right;
}
.im_avatar {
    width: 60px !important;
    height: 60px;
    border-radius: 50%;
    vertical-align: middle;
}
.liuyan {
    color: #9fa3b0;
    font-size: 14px;
    padding-right: 35px;
    text-align: left;
}
.list:hover {
    background: #f2f5fa !important;
}
.liaotian_msg {
    position: relative;
    height: 400px;
    overflow-y: scroll;
    width: 102%;
}
.user_ziliao {
    // position: absolute;
    width: 100%;
    top: 0;
    padding: 20px 40px;
    border-bottom: 1px solid #f2f5fa;
}
.user_ziliao_1 {
    display: flex;
    > div {
        margin-right: 60px;
        text-align: left;
    }
}

.msg_con {
    height: 400px;
    border-bottom: 1px solid #f7f9fc;
    width: 98%;
    overflow: hidden;
    border-bottom: 1px solid #f7f9fc;
}
// .msg_con::-webkit-scrollbar{
//     display:none;
// }
// .msg_con::-moz-scrollbar{
//     display:none;
// }
.m-message {
    padding: 10px 15px 0;

    li {
        margin-bottom: 15px;
        overflow: hidden;
    }
    .time {
        margin: 7px 0;
        text-align: center;

        > span {
            display: inline-block;
            padding: 0 18px;
            font-size: 12px;
            color: #333;
            border-radius: 2px;
            // background-color: #dcdcdc;
        }
    }
    .avatar {
        float: left;
        margin: 0 10px 0 0;
        border-radius: 50%;
    }
    .text {
        display: inline-block;
        position: relative;
        padding: 0 10px;
        max-width: ~"calc(100% - 40px)";
        min-height: 30px;
        line-height: 2.5;
        font-size: 12px;
        text-align: left;
        word-break: break-all;
        background-color: #f2f5fa;
        border-radius: 4px;
        color: #414a60;

        &:before {
            content: " ";
            position: absolute;
            top: 9px;
            right: 100%;
            border: 6px solid transparent;
            border-right-color: #fafafa;
        }
    }

    .self {
        text-align: right;

        .avatar {
            float: right;
            margin: 0 0 0 10px;
        }
        .text {
            background-color: #b2e281;

            &:before {
                right: inherit;
                left: 100%;
                border-right-color: transparent;
                border-left-color: #b2e281;
            }
        }
    }
}
.msg_shuru {
}
.msg_shuru_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #c3c6cd;
    position: relative;

    .prover {
        position: absolute;
        top: -300px;
        height: 302px;
        border: 1px solid #ddd;
        width: 482px;
        text-align: left;
        overflow: auto;
        background: #fff;
        > span {
            display: inline-block;
            width: 80px;
            height: 80px;
            margin: 5px;
            border: 1px solid #ccc;
        }
    }
}
.msg_shuru_gn {
    position: relative;
    display: flex;
    justify-content: flex-start;
    span {
        position: absolute;
    }
    > div {
        width: 40px;
        height: 40px;
        color: #b7bac3;
        text-align: center;
        line-height: 40px;
    }
}
.msg_clos {
    display: flex;
    justify-content: flex-start;
    > div {
        padding: 10px;
    }
}
.m-text {
    height: 200px;
    border-top: solid 1px #ddd;
    position: relative;

    textarea {
        padding: 10px;
        height: 100%;
        width: 100%;
        border: none;
        outline: none;
        font-family: "Micrsofot Yahei";
        resize: none;
        padding-bottom: 60px;
    }
    .bot {
        color: #dee0e4;
        position: absolute;
        bottom: 20px;
        right: 40px;
        height: 40px;
        text-align: right;
    }
}
.bot_btn {
    color: #d1d4db !important;
    border: 1px solid #d1d4db !important;
    margin-left: 20px;
}
.list_actives {
    background: #f2f5fa !important;
}
.none_user {
    // height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
}
.info {
    margin-left: 20px;
}

.info li {
    // display: inline-block;
    float: left;
    width: 33%;
    margin: 10px 0px 5px 0;
    text-align: left;
    padding-left: 10px;
}
.box {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 50px;
    border-bottom: 0 !important;
}
</style>
<script>
import Vue from "vue";
import store from "../../assets/js/im.js";

console.log(store);
import im from "../../assets/js/im/send_common_msg.js";

console.log(im);

console.log(im.MSG_ELEMENT_TYPE);

export default {
    data () {
        let serverData = store.fetch();
        console.log(serverData);
        return {
            adminlist: this.$store.state.adminList,
            text: "",

            selToID: "yz_admin_22",
            textvalue: [],
            emoji: [],
            msgedit: "",
            scrollTop: 0,
            emotionFlag: false,

            options: [
                {
                    value: "全部对话",
                    label: "全部对话"
                },
                {
                    value: "选项2",
                    label: "双皮奶"
                },
                {
                    value: "选项3",
                    label: "蚵仔煎"
                },
                {
                    value: "选项4",
                    label: "龙须面"
                },
                {
                    value: "选项5",
                    label: "北京烤鸭"
                }
            ],
            value: "全部对话",
            num: 1,
            isopenemoji: false,

            user: serverData.user,
            // // 用户列表
            userList: serverData.userList,
            // // 会话列表
            // sessionList: serverData.sessionList,
            // // 搜索key
            // search: '',
            // // 选中的会话Index
            // sessionIndex: '',
            index: 0,
            user: serverData.user,
            // 用户列表
            userList: serverData.userList,
            // 会话列表
            sessionList: [],
            // 搜索key
            search: "",
            // 选中的会话Index
            sessionIndex: ""
        };
    },

    methods: {
        pointemoji (item) {
            //
            //    this.text=this.text+`<img src="${item.img}">`;
            im.selectEmotionImg(item.text);

            this.isopenemoji = false;
        },
        showEmoji () {
            im.showEmotionDialog();
            console.log(this.isopenemoji);
            this.isopenemoji = !this.isopenemoji;
            console.log(this.emoji);
        },
        inputing (e) {
            if (e.type == "click" || e.keyCode === 13) {
                //  this.sessionList.push({
                //         text: this.text,
                //         date: new Date(),
                //         self: true
                //     });
                console.log(this.text);
                im.onSendMsg(this.text);
                this.text = "";
            }
        },
        select (value) {
            this.sessionIndex = this.userList.indexOf(value);
            console.log(this.sessionList);
            if (this.sessionList == undefined) {
                this.sessionList = [];
            }
        },
        avatars (item) {
            let user = item.self ? this.user : this.userList[this.sessionIndex];
            return user && this.$fnc.getImgUrl(user.img);
        }
    },

    created () {
        console.log("@@@step_1111111111【管理员信息打印】@@@");
        console.log(this.adminlist); //管理员信息 im:"yz_admin_1" role_id:"1" sig:""

        console.log(this.adminlist.sig);
        console.log(im.getLastC2CHistoryMsgs());
        this.selToID = "yz_admin_22"; //发送对象IM账号
        im.webimLogin(this);
        // uni.startPullDownRefresh();
    },

    computed: {
        session () {
            return this.sessionList[this.sessionIndex];
        }
    },
    watch: {
        // 每当sessionList改变时，保存到localStorage中
        sessionList: {
            deep: true,
            handler () {
                store.save({
                    user: this.user,
                    userList: this.userList,
                    sessionList: this.sessionList
                });
            }
        }
    },
    filters: {
        // 将日期过滤为 hour:minutes
        time (date) {
            if (typeof date === "string") {
                date = new Date(date);
            }
            return (
                date.getHours() +
                ":" +
                (date.getMinutes() < 9 ? "0" + date.getMinutes() : date.getMinutes())
            );
        }
    },
    directives: {
        // 发送消息后滚动到底部
        "scroll-bottom" (e) {
            Vue.nextTick(() => {
                e.scrollTop = e.scrollHeight - e.clientHeight;
            });
        }
    }
};
</script>
